import React from 'react'
import PropTypes from 'prop-types';
import { Icon,Tabs,Button,Modal,List,DatePicker,InputItem,Toast } from 'antd-mobile'
import {Link} from 'react-router'
import CommonHeader from 'COMPONENT/CommonHeader';
import './index.less'
const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);

const ListItem = List.Item;;;
// ========================================
class RentQuery extends React.Component {
	static contextTypes = {
        router: PropTypes.object.isRequired
    }
	
	constructor(props) {
    super(props);
	this.state = {
		modalVisible:false ,
		dates:now,
		tabs:[
			{title:'当前租约(2)'},
     	  	{title:'历史租约(3)'},
     	  	{title:'预约记录(1)'},
     	  {title:'关注房源(3)'}
     	],
     	list:[
            {'name':'大学生人才公寓一期 801室','lou':'梦想公寓','money':'22m²','road':'台北香港路','img':'./imgs/zz1.png','address':'距7号线企划路515米','note1':'在线签约','note2':'精装','note3':'近地铁','note4':'在租','state':'0'},
            {'name':'香江花园一二期 2室一厅','lou':'链家','money':'94m²','road':'唐家墩','img':'./imgs/zz1.png','address':'距唐家墩站0.5km','note1':'近地铁','note2':'随时看房','note3':'精装','note4':'定金待支付','state':'1'},
        ],
        list_1:[
            {'name':'大学生人才公寓一期 801室','lou':'梦想公寓','money':'22m²','road':'台北香港路','img':'./imgs/zz1.png','address':'距7号线企划路515米','note1':'在线签约','note2':'精装','note3':'近地铁','note4':'1480'},
            {'name':'香江花园一二期 2室一厅','lou':'链家','money':'94m²','road':'唐家墩','img':'./imgs/zz1.png','address':'距唐家墩站0.5km','note1':'近地铁','note2':'随时看房','note3':'精装','note4':'2400'},
            {'name':'香江花园一二期 2室一厅','lou':'链家','money':'94m²','road':'唐家墩','img':'./imgs/zz1.png','address':'距唐家墩站0.5km','note1':'近地铁','note2':'随时看房','note3':'精装','note4':'2400'}
        ],
	}
	}
	leftAction = () => {
		this.context.router.push({
			pathname: '/Home'
		})
	}
	
	toHouseList=()=>{
    this.context.router.push({
        pathname: '/RentHouse/HouseList'
    })
    localStorage.setItem('group','0')
  }
	
	toHouseDetail=()=>{
    this.context.router.push({
        pathname: '/RentHouse/HouseDetail'
    })
    localStorage.setItem('type','0')
    localStorage.setItem('name','立即签约');
  }
	
	handleCancel =()=> {
		Toast.info('取消预约成功',1);
	}
	
	handleOrder =(val)=> {
		console.log(val);
	this.context.router.push({
       pathname: '/ViewOrder',     
    })
	localStorage.setItem('viewOrder',val);
	}
	
	goHouseDetail=()=>{
    this.context.router.push({
        pathname: '/Home/HouseDetail'

    })
    localStorage.setItem('name','立即签约');
    localStorage.getItem('type','0')
  }
	
	onClose = ()=> {
		this.setState ({
			modalVisible :false ,
		})
	}
	handleModify =()=> {
		this.setState ({
			modalVisible :true ,
		})
	}
    render() {
    	let { tabs,list,list_1,modalVisible,dates } = this.state ;
    	let month =dates.getMonth() +1 ;
    	let datess =dates.getFullYear()+'-'+month+'-'+dates.getDate();
    	let listGroup ;
    	let listGroup_1 ;
    	listGroup=list.map((item, index)=>{
            return(
                <li onClick={()=>this.handleOrder(item.state)} style={{
                	height:'2.5rem',padding:'.2rem'
                }}>
                    <img src={item.img} alt=""/>
                    <div>
                        <h2 style={{ marginBottom:`0.1rem` }} >{item.name}</h2>
                        <p className='showMessage_1' ><span>{item.lou}</span> <span>{item.money}</span><span>{item.road}</span><span>{item.address}</span></p>
                        <div className='button'>
                            <a>{item.note1}</a> <a>{item.note3}</a><a>{item.note4}</a>
                        </div>

                    </div>
                </li>
            )
        })
    	listGroup_1=list_1.map((item, index)=>{
            return(
                <li style={{
                	height:'2.5rem',padding:'.2rem'
                }}>
                    <img src={item.img} alt=""/>
                    <div>
                        <h2 style={{ marginBottom:`0.1rem` }} >{item.name}</h2>
                        <p className='showMessage_1' ><span>{item.lou}</span> <span>{item.money}</span><span>{item.road}</span><span>{item.address}</span></p>
                        <div className='button'>
                            <a>{item.note1}</a> <a>{item.note4}</a>
                        </div>
                        <div style={{ color:`red`,margin:`15px 0 0 10px`,fontSize:`17px` }} >{item.note4}<span>元/月</span></div>
                    </div>
                </li>
            )
        })
        return (
            <div style={{

            }}>
            	<CommonHeader 
					name= "租约查询"					
					leftContentTitle="@back"
					leftContent="返回"
					leftAction={this.leftAction}
				/>
	    		<div style={{height:'.9rem'}}></div>
	    		
            	<Tabs swipeable={ false}tabs={tabs} initialPage={0} animated={false} useOnPan={false}   >
            	
            	
      <div style={{ backgroundColor: '#fff' }}>
      		<div className='homeList' style={{ width:`100%`,padding:`0`,height:'5.6rem' }}>
      		
	            <ul>
	                {listGroup}
	            </ul>
	            

            </div>
            <div className='listBox bannerList' >
		          <p>热门房源 </p>
		          <span>百万xx客户的品质公寓</span>
		          <ul>
		            <li onClick={this.toHouseDetail.bind(this)}>
		              <img src="./imgs/hz1.png" alt=""/>
		              <h2>青浦.环境好.舒适高</h2>
		              <span>￥1390/月</span>
		            </li>
		            <li onClick={this.toHouseDetail.bind(this)}>
		              <img src="./imgs/hz1.png" alt=""/>
		              <h2>嘉定.性价比高</h2>
		              <span>￥1860/月</span>
		            </li>
		            <li onClick={this.toHouseDetail.bind(this)}>
		              <img src="./imgs/hz1.png" alt=""/>
		              <h2>浦东.配套全</h2>
		              <span>￥2390/月</span>
		            </li>
		             <li onClick={this.toHouseDetail.bind(this)}>
		              <img src="./imgs/hz1.png" alt=""/>
		              <h2>毕业租房攻略</h2>
		              <span>￥1490/月</span>
		            </li>
		          </ul>
		        </div>
      </div>
      <div style={{  backgroundColor: '#fff' }}>
      		<div className='homeList' style={{ width:`100%`,padding:`0` }}>
      		
                <ul>
                    {listGroup_1}
                </ul>
            </div>
      </div>
      <div style={{  backgroundColor: '#fff' }}>
      		<div className='viewOrder'>
            		<p style={{ background:`#108ee9`,color:`#fff` }} >房源名称:<span style={{ color:`#fff` }} >渣家左路 5居室 南卧</span></p>
            		<p>看房时间:<span> { datess } </span></p>
            		<p>月租金:<span>1500</span></p>
            		<p>支付方式:<span>支付宝</span></p>
            		<p>看房时间:<span>周一至周五</span></p>
            		<p>详情查看:<span>台北香港路,据循礼门站0.4km</span></p>  
            		<div className='modifyRes' >
            		<Link onClick={this.handleCancel} >取消预约</Link>
            		<Link onClick={this.handleModify} >修改预约时间</Link>
            		</div>
            </div>
      </div>
      <div style={{  backgroundColor: '#fff' }}>
      		<div className='homeList' style={{ width:`100%`,padding:`0` }}>
                <ul>
                    {listGroup_1}
                </ul>
            </div>
      </div>
    </Tabs>
    	<Modal
    		popup
    		visible = { modalVisible }
    		onClose = { this.onClose }
    		animationType = 'slide-up'
    	>
    	<List renderHeader={() => <div>修改预约时间</div>} className="popup-list">
            <DatePicker
          mode="date"
          title="Select Date"
          extra="Optional"
          value={this.state.dates}
          onChange={dates => this.setState({ dates })}
        >
          <ListItem arrow="horizontal">看房时间</ListItem>
        </DatePicker>
        <InputItem
        	defaultValue='15555555555'
        	
        >
        联系电话
        </InputItem>
        <InputItem
        	defaultValue='张三'
        	
        >
        联系人
        </InputItem>
            <ListItem>
              {/*<Button type="primary" className="form_btn" onClick={this.onClose}>确认修改</Button>*/}
                <div className="btnGroup-one">
                    <Button type="primary" className="btnGroup-one-btn" onClick={this.onClose}>确认修改</Button>
                </div>
            </ListItem>
          </List>
    	</Modal>
            </div>    
            

        );
    }
}
// ========================================
export default RentQuery;